{extend name="public/common"}

{block name="style"}
<title>订单详情</title>
<style>
    body{
        background-color: #F0F0F0;
    }
    .mint-tab-item-label { font-size: 1.4rem;  }
    .mint-navbar .mint-tab-item.is-selected {color: #69B9F9;opacity: .9;margin-bottom: 0}
    /*.mint-tab-item:active {*/
        /*background: red;*/
    /*}*/
    .tab-item-sort>.tab-item-time {padding: 0 4vw;height:7.2vw;line-height: 7.2vw;color: #929292;font-size: 1.2rem;}
    .tab-sort-num {background: #fff;width:96vw;padding: 4.53vw 0 4.53vw 4vw;margin-bottom: 2.67vw;}
    .tab-sort-Img {width:21.33vw;height:21.33vw;float:left;}
    .tab-sort-detail {margin-left: 24.53vw;height:21.4vw;position: relative;padding-right: 4vw;}
    .tab-sort-title {
        color: #333;
        font-size: 1.6rem;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
        min-height: 11.733vw;
    }
    .tab-sort-time {font-size: 1.2rem;color: #999;}
    .tab-sort-day {margin-top: 1.5vw;}
    .tab-sort-day span {padding: 1px;}
    .tab-sort-day span:first-child {
        border-top: 1px solid #69B9F9;
        border-left: 1px solid #69B9F9;
        border-bottom: 1px solid #69B9F9;
        background: #69B9F9;
        color: #fff;
        border-top-left-radius: 1vw;
        border-bottom-left-radius: 1vw;
    }
    .tab-sort-day span:last-child {
        border-top: 1px solid #69B9F9;
        border-right: 1px solid #69B9F9;
        border-bottom: 1px solid #69B9F9;
        color: #69B9F9;
        border-top-right-radius: 1vw;
        border-bottom-right-radius: 1vw;
    }
    .tab-sort-money {
        position: absolute;
        bottom:0;
        right:4vw;
        font-size: 1.6rem;
        color: #52CC92;
    }
    .tab-sort-bottom {
        margin-left: 24.53vw;
        border-top: 1px solid #E8E8E8;
        margin-top: 2.14vw;
        padding-top: 2.14vw;
    }
    .tab-sort-bottom .active {font-size: 1.1rem;color: #333;}
    .tab-sort-bottom .active span {
        padding: 1vw;
        background: #FCC44B;
        border-radius: 2px;
        color: #fff;
    }
    .tab-sort-bottom .cancel {font-size: 1.1rem;color: #999;}
    .tab-sort-bottom .cancel span {
        padding: 1vw;
        background: #E5E5E5;
        border-radius: 2px;
        color: #fff;
    }
    .detail-people {background: #fff;padding:4vw;margin-bottom: 2.67vw;}
    .people_sort {margin-bottom: 3.33vw;}
    .people_name {font-size: 1.4rem;color: #888;float:left;}
    .people_information {margin-left: 17.34vw;font-size: 1.4rem;color: #333;}
    .people_information p {line-height: 6vw;}
    .detail-main {background: #fff;padding: 0 4vw 4vw 4vw;margin-bottom: 8vw;}
    .detail-main_01 {height:16vw;line-height: 16vw;text-align: right;font-size: 2.4rem;color: #000;border-bottom: 1px solid #e5e5e5;margin-bottom: 3vw;}
    .detail-main_01 span {float:left;text-align: left;font-size: 1.5rem;color: #888;}
    .detail-main_02 p {text-align: right;color: #666;font-size: 1.4rem;line-height: 8vw;}
    .detail-main_02 p span {float:left;text-align: left;font-size: 1.4rem;color: #888;}
    .cancel {width:92vw;height:11.74vw;text-align: center;line-height: 11.74vw;background: #69B9F9;color: #fff;font-size: 1.8rem;border-radius: 2.5vw;margin:0  auto 20vw;display: inherit;}
</style>
{/block}

{block name="body"}
<!-- -1 删除   0.禁用   1 预报名中 2启动.-->
<div id="app">
    <div class="tab-sort-num">
        <img src="/index/images/cbd.jpg" alt="" class="tab-sort-Img">
        <div class="tab-sort-detail">
            <div class="tab-sort-title">第六届哈尔滨TAISHO雪地活动第六届哈尔滨TAISHO雪地活动</div>
            <div class="tab-sort-time">赛事时间：2018.02.24-2018</div>
            <div class="tab-sort-day"><span>热门活动 </span><span>距活动开始还有3天</span></div>
            <div class="tab-sort-money">¥88元</div>
        </div>
        <div class="tab-sort-bottom">
            <div class="active"><span>报</span> 已报名参加该活动</div>
            <!--<div class="cancel"><span>消</span> 已取消参加该活动</div>-->
        </div>
    </div>
    <div class="detail-people">
        <div class="people_sort" v-for="item in 2">
            <div class="people_name">出行人1</div>
            <div class="people_information">
                <p>周金梅 17898776543</p>
                <p>身份证号码： 330181445551243544X</p>
                <p>紧急联系电话：17898776543</p>
            </div>
        </div>
        <div class="people_user">
            <div class="people_name">联系人</div>
            <div class="people_information">
                <p>周金梅 17898776543</p>
                <p>备注： 坚实的部分技术部地方加班费驾驶的飞机安监部短发接不到房间爱上副科级啊</p>
            </div>
        </div>
    </div>
    <div class="detail-main">
        <div class="detail-main_01"><span>付款金额</span>¥2400.00</div>
        <div class="detail-main_02">
            <p><span>当前状态</span>支付成功</p>
            <p><span>商户名称</span>毅行达人活动报名费用</p>
            <p><span>商户简称</span>炬火影视</p>
            <p><span>支付时间</span>2015-09-14 01:02:21</p>
            <p><span>支付方式</span>微信支付</p>
            <p><span>交易单号</span>121718910134150928210680762</p>
            <p><span>商户单号</span>121789101201509235667375344</p>
        </div>

    </div>
    <mt-button type="primary" class="cancel" @click="toggleModal">取消报名</mt-button>
    <!--<div class="cancel" @click="toggleModal">取消报名</div>-->
</div>
{/block}

{block name="script"}
<script>
    var app = new Vue({
        el: '#app',
        data: {
            selected:"selected1",
            baseInfo:'',
            subData:{
                id:'',
                typeid:''
            },
            modal:{
                isShow:false
            },
            typeVisible:false,
            typeSlots:[
                {
                    defaultIndex:1,
                    values:1
                }
            ],
        },
        created(){
            var yu=[],
                hot=[],
                end=[],
                other=[],
                baseInfo=this.baseInfo,
                now=Date.parse(new Date())/1000;
            for(var i=0 ;i<baseInfo.length;i++){
                if(baseInfo[i].start_time < now){
                    end.push(baseInfo[i])
                }else{
                    if(baseInfo[i].status == 2){
                        hot.push(baseInfo[i])
                    }else if(baseInfo[i].status == 1){
                        yu.push(baseInfo[i])
                    }else{
                        other.push(baseInfo[i])
                    }
                }
            }
            console.log(hot,yu,end,other)
            this.baseInfo = hot.concat(yu.concat(end.concat(other)));
        },
        methods: {
            toggleModal(){
                var _this = this;
//                _this.modal.isShow = !_this.modal.isShow;
                _this.$messagebox({
                    title: '确定取消报名吗？',
                    message: '取消后，报名费用将会退还至您的账户',
                    showCancelButton: true,
                    confirmButtonText:'不，再想想',
                    cancelButtonText:'确定取消'
                }).then(action => {
                    console.log(1)
            });
            },
            jumpToUser(){
                window.location.href = '/index/user/index'
            }
        }
    })
</script>
{/block}